<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
	<link rel="icon" type="image/png" href="assets/img/favicon.png">	
	
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Get Shit Done Kit Components by Creative Tim</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    
    <link href="bootstrap3/css/bootstrap.css" rel="stylesheet" />
    
	<link href="assets/css/gsdk.css" rel="stylesheet" />  
    <link href="assets/css/demo.css" rel="stylesheet" />  

	<script src="jquery/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="assets/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>

	<script src="bootstrap3/js/bootstrap.js" type="text/javascript"></script>
	<script src="assets/js/gsdk-checkbox.js"></script>
	<script src="assets/js/gsdk-radio.js"></script>
	<script src="assets/js/gsdk-bootstrapswitch.js"></script>
	<script src="assets/js/get-shit-done.js"></script>
    
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

    <!--     Font Awesome     -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Grand+Hotel' rel='stylesheet' type='text/css'>
    
</head>

<style>
pre.prettyprint{
    background-color: #ffffff;
    border: 1px solid #999; 
    margin-top: 20px;
    padding: 20px;
    text-align: left;
}
.atv, .str{
    color: #05AE0E;
}
.tag, .pln, .kwd{
    color: #3472F7;
}
.atn{
    color: #2C93FF;
}
.pln{
    color: #333;
}
.com{
    color: #999;
}
.space-top{
    margin-top: 50px;
}
.btn-primary .caret{
    border-top-color: #3472F7;
    color: #3472F7;
}
</style>
<body>

<div id="navbar-full">
    <div class="container">
        <nav class="navbar navbar-ct-blue navbar-transparent navbar-fixed-top" role="navigation">
          
          <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="http://creative-tim.com">
                     <div class="logo-container">
                        <div class="logo">
                            <img src="assets/img/new_logo.png">
                        </div>
                        <div class="brand">
                            Creative Tim
                        </div>
                    </div>
                </a>
            </div>
        
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                    <li><a href="index.html">Back to Kit</a></li>
                    
                    <li><a href="http://www.creative-tim.com/product/get-shit-done-kit" class="btn btn-round btn-default">Download</a></li>
               </ul>
              
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
    </div><!--  end container-->
    
    <div class='blurred-container'>
        <div class="motto">
            <div>Get</div>
            <div class="border no-right-border">Sh</div><div class="border">it</div>
            <div>Done</div>
        </div>
        <div class="img-src" style="background-image: url('assets/img/blurred-black-cover.jpeg')"></div>
        <div class="img-src img-blurred" style="background-image: url('assets/img/blurred-black-cover.jpeg')"></div>
    </div>
    
</div>

<div class="main">
<div class="container tim-container" style="min-height: 2000px;">

    <div class="row tim-row">
        <div class="col-md-3 col-md-offset-1">
            <h3>Buttons </h3>
        </div>
        <div class="col-md-7">
                <p>
                We worked over the original Bootstrap classes, choosing a different, slightly intenser color pallete:
                </p>
                <p>
                   <button class="btn btn-default">Default</button>
                   <button class="btn btn-primary">Primary</button>
                   <button class="btn btn-info">Info</button>
                   <button class="btn btn-success">Success</button>
                   <button class="btn btn-warning">Warning</button>
                   <button class="btn btn-danger">Danger</button>
                   <button class="btn btn-link">Link</button>
                   
                </p>

<pre class="prettyprint">
&lt;button class=&quot;btn btn-default&quot;&gt;Default&lt;/button&gt;

&lt;button class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;

&lt;button class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;

&lt;button class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;

&lt;button class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;

&lt;button class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;

&lt;button class=&quot;btn btn-link&quot;&gt;Link&lt;/button&gt;
</pre>
                
                <p class="space-top">
                    Buttons come in all needed sizes:
                </p>
                <p>
                    <button class="btn btn-primary btn-lg">Large</button>
                    <button class="btn btn-primary">Normal</button>
                    <button class="btn btn-primary btn-sm">Small</button>
                    <button class="btn btn-primary btn-xs">Extra Small</button>
                    
                </p>
<pre class="prettyprint">
&lt;button class=&quot;btn btn-primary btn-lg&quot;&gt;Large&lt;/button&gt;

&lt;button class=&quot;btn btn-primary&quot;&gt;Normal&lt;/button&gt;

&lt;button class=&quot;btn btn-primary btn-sm&quot;&gt;Small&lt;/button&gt;

&lt;button class=&quot;btn btn-primary btn-xs&quot;&gt;Extra Small&lt;/button&gt;
</pre>

                <p class="space-top">
                    We added extra classes that can help you better customise the look. You can use regular buttons, filled buttons, rounded corners buttons or plain link buttons. Let's see some examples:
                </p>
                <p>
                    <button class="btn btn-primary">Default</button>
                    <button class="btn btn-primary btn-fill">Filled</button>
                    <button class="btn btn-primary btn-round">Round</button>
                    <button class="btn btn-primary btn-simple">Simple</button>
                </p>
<pre class="prettyprint">
&lt;button class=&quot;btn btn-primary&quot;&gt;Default&lt;/button&gt;

&lt;button class=&quot;btn btn-primary btn-fill&quot;&gt;Filled&lt;/button&gt;

&lt;button class=&quot;btn btn-primary btn-round&quot;&gt;Round&lt;/button&gt;

&lt;button class=&quot;btn btn-primary btn-simple&quot;&gt;Simple&lt;/button&gt;   
</pre>

                <p class="space-top">
                    Button groups, toolbars, and disabled state all work like they are supposed to.
                </p>
            
        </div>
        
    </div>
<!--     end row -->

    <div class="row tim-row">
        <div class="col-md-3 col-md-offset-1">
            <h3> Checkboxes </h3>
        </div>
        <div class="col-md-7">
            <p>
                To use the custom checkboxes, you need to import a separate Javascript file called 'checkbox.js'.
            </p>
            <p>
                  <label class="checkbox" for="checkbox1">
                    <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox">
                    Unchecked
                  </label>
                  <label class="checkbox" for="checkbox2">
                    <input type="checkbox" value="" id="checkbox2" data-toggle="checkbox" checked>
                    Checked
                  </label>
                  <label class="checkbox" for="checkbox3">
                    <input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" disabled>
                    Disabled unchecked
                  </label>
                  <label class="checkbox" for="checkbox4">
                    <input type="checkbox" value="" id="checkbox4" data-toggle="checkbox" disabled checked>
                    Disabled checked
                  </label>
            </p>
            <p>Usage can be done via Data Attributes: </p>
<pre class="prettyprint">
&lt;label class=&quot;checkbox&quot; for=&quot;checkbox1&quot;&gt;

    &lt;input type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;checkbox1&quot; data-toggle=&quot;checkbox&quot;&gt;

    Unchecked

&lt;/label&gt;

&lt;label class=&quot;checkbox&quot; for=&quot;checkbox2&quot;&gt;

    &lt;input type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;checkbox2&quot; data-toggle=&quot;checkbox&quot; checked&gt;

    Checked

&lt;/label&gt;

&lt;label class=&quot;checkbox&quot; for=&quot;checkbox3&quot;&gt;

    &lt;input type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;checkbox3&quot; data-toggle=&quot;checkbox&quot; disabled&gt;

    Disabled unchecked

&lt;/label&gt;

&lt;label class=&quot;checkbox&quot; for=&quot;checkbox4&quot;&gt;

    &lt;input type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;checkbox4&quot; data-toggle=&quot;checkbox&quot; disabled checked&gt;

    Disabled checked

&lt;/label&gt;

</pre>
            <p>Or can be called vis js:</p>
<pre class="prettyprint">
$(':checkbox').checkbox();
</pre>
            <p>
                We added more classes to provide you with choices
            </p>
            
                     <label class="checkbox ct-blue" for="checkbox1">
                        <input type="checkbox" value="" id="checkbox1" data-toggle="checkbox" checked>
                        Blue
                     </label>
                     <label class="checkbox ct-azzure" for="checkbox2">
                        <input type="checkbox" value="" id="checkbox2" data-toggle="checkbox" checked>
                        Azzure
                     </label>
                     <label class="checkbox ct-green" for="checkbox3">
                        <input type="checkbox" value="" id="checkbox3" data-toggle="checkbox" checked>
                        Green
                     </label>
                     <label class="checkbox ct-orange" for="checkbox4">
                        <input type="checkbox" value="" id="checkbox4" data-toggle="checkbox" checked>
                        Orange
                     </label>
                     <label class="checkbox ct-red" for="checkbox5">
                        <input type="checkbox" value="" id="checkbox5" data-toggle="checkbox" checked>
                        Red
                     </label>
<pre class="prettyprint">
&lt;label class=&quot;checkbox ct-blue&quot; for=&quot;checkbox1&quot;&gt;

    &lt;input type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;checkbox1&quot; data-toggle=&quot;checkbox&quot; checked&gt;

    Blue

&lt;/label&gt;

&lt;label class=&quot;checkbox ct-azzure&quot; for=&quot;checkbox2&quot;&gt;

    &lt;input type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;checkbox2&quot; data-toggle=&quot;checkbox&quot; checked&gt;

    Azzure

&lt;/label&gt;

&lt;label class=&quot;checkbox ct-green&quot; for=&quot;checkbox3&quot;&gt;

    &lt;input type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;checkbox3&quot; data-toggle=&quot;checkbox&quot; checked&gt;

    Green

&lt;/label&gt;

&lt;label class=&quot;checkbox ct-orange&quot; for=&quot;checkbox4&quot;&gt;

    &lt;input type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;checkbox4&quot; data-toggle=&quot;checkbox&quot; checked&gt;

    Orange

&lt;/label&gt;

&lt;label class=&quot;checkbox ct-red&quot; for=&quot;checkbox5&quot;&gt;

    &lt;input type=&quot;checkbox&quot; value=&quot;&quot; id=&quot;checkbox5&quot; data-toggle=&quot;checkbox&quot; checked&gt;

    Red

&lt;/label&gt;
</pre>
            
            <p>
                <h4>Methods</h4>
                <ul class="list-unstyled">
                    <li>
                        <b>.checkbox('toggle')</b>
                        is used to toggle the states between checked and unchecked.
                    </li>
                    <li>
                        <b>.checkbox('check') </b>
                        sets the checkbox state to checked.
                    </li>
                    <li>
                        <b>.checkbox('uncheck') </b>
                        sets the state to unchecked.
                    </li>
                </ul>
                
<pre class="prettyprint">
$(':checkbox').checkbox('check');
</pre>
                <h4>Events</h4>
                <ul class="list-unstyled">
                    <li>
                        <b>.on('toggle') </b>
                        gets activated when the checkbox state changes between checked and unchecked.                        
                    </li>
                    <li>
                        <b>.on('change') </b>
                        the same as toggle.
                    </li>
                </ul>
            </p>
<pre class="prettyprint">
$(':checkbox').on('toggle', function() {
  // Do something
});
</pre>
        </div>
    </div>

<!-- end row -->

<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3> Radio buttons </h3>
    </div>
    <div class="col-md-7">
     <p>
                To use the custom radio buttons, you need to import a separate Javascript file called 'radio.js'.
            </p>
            <p>
               <label class="radio">
                <input type="radio" name="optionsRadios" data-toggle="radio" id="optionsRadios1" value="option1">
                <i></i>Radio is off
              </label>
              <label class="radio">
                <input type="radio" name="optionsRadios" data-toggle="radio" id="optionsRadios2" value="option1" checked>
                <i></i>Radio is on
              </label>
    
              <label class="radio">
                <input type="radio" name="optionsRadiosDisabled" data-toggle="radio" id="optionsRadios3" value="option2" disabled>
                <i></i>Disabled radio is off
              </label>
              <label class="radio">
                <input type="radio" name="optionsRadiosDisabled" data-toggle="radio" id="optionsRadios4" value="option2" checked disabled>
                <i></i>Disabled radio is on
              </label>
            </p>
            <p>Usage can be done via Data Attributes: </p>
<pre class="prettyprint">
&lt;label class=&quot;radio&quot;&gt;

    &lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; data-toggle=&quot;radio&quot; id=&quot;optionsRadios1&quot; value=&quot;option1&quot;&gt;

    &lt;i&gt;&lt;/i&gt;Radio is off

&lt;/label&gt;

&lt;label class=&quot;radio&quot;&gt;   

    &lt;input type=&quot;radio&quot; name=&quot;optionsRadios&quot; data-toggle=&quot;radio&quot; id=&quot;optionsRadios2&quot; value=&quot;option1&quot; checked&gt;

    &lt;i&gt;&lt;/i&gt;Radio is on

&lt;/label&gt;

&lt;label class=&quot;radio&quot;&gt;

    &lt;input type=&quot;radio&quot; name=&quot;optionsRadiosDisabled&quot; data-toggle=&quot;radio&quot; id=&quot;optionsRadios3&quot; value=&quot;option2&quot; disabled&gt;

    &lt;i&gt;&lt;/i&gt;Disabled radio is off

&lt;/label&gt;

&lt;label class=&quot;radio&quot;&gt;

    &lt;input type=&quot;radio&quot; name=&quot;optionsRadiosDisabled&quot; data-toggle=&quot;radio&quot; id=&quot;optionsRadios4&quot; value=&quot;option2&quot; checked disabled&gt;

    &lt;i&gt;&lt;/i&gt;Disabled radio is on

&lt;/label&gt;
</pre>
            <p>Or can be called vis js:</p>
<pre class="prettyprint">
$(':radio').radio();
</pre>
            <p>
                You can choose between different colors:
            </p>
                      <label class="radio ct-blue">
                        <input type="radio" name="optionsRadios1" data-toggle="radio" id="optionsRadios1" value="option1" checked>
                        <i></i>Blue
                      </label>
                      <label class="radio ct-azzure">
                        <input type="radio" name="optionsRadios2" data-toggle="radio" id="optionsRadios2" value="option1" checked>
                        <i></i>Azzure
                      </label>
                      <label class="radio ct-green">
                        <input type="radio" name="optionsRadios3" data-toggle="radio" id="optionsRadios3" value="option1" checked>
                        <i></i>Green
                      </label>
                      <label class="radio ct-orange">
                        <input type="radio" name="optionsRadios4" data-toggle="radio" id="optionsRadios4" value="option1" checked>
                        <i></i>Orange
                      </label>
                      <label class="radio ct-red">
                        <input type="radio" name="optionsRadios5" data-toggle="radio" id="optionsRadios5" value="option1" checked>
                        <i></i>Red
                      </label>
<pre class="prettyprint">
&lt;label class=&quot;radio ct-blue&quot;&gt;

    &lt;input type=&quot;radio&quot; name=&quot;optionsRadios1&quot; data-toggle=&quot;radio&quot; id=&quot;optionsRadios1&quot; value=&quot;option1&quot; checked&gt;

    &lt;i&gt;&lt;/i&gt;Blue

&lt;/label&gt;

&lt;label class=&quot;radio ct-azzure&quot;&gt;

    &lt;input type=&quot;radio&quot; name=&quot;optionsRadios2&quot; data-toggle=&quot;radio&quot; id=&quot;optionsRadios2&quot; value=&quot;option1&quot; checked&gt;

    &lt;i&gt;&lt;/i&gt;Azzure

&lt;/label&gt;

&lt;label class=&quot;radio ct-green&quot;&gt;

    &lt;input type=&quot;radio&quot; name=&quot;optionsRadios3&quot; data-toggle=&quot;radio&quot; id=&quot;optionsRadios3&quot; value=&quot;option1&quot; checked&gt;

    &lt;i&gt;&lt;/i&gt;Green

&lt;/label&gt;

&lt;label class=&quot;radio ct-orange&quot;&gt;

    &lt;input type=&quot;radio&quot; name=&quot;optionsRadios4&quot; data-toggle=&quot;radio&quot; id=&quot;optionsRadios4&quot; value=&quot;option1&quot; checked&gt;

    &lt;i&gt;&lt;/i&gt;Orange

&lt;/label&gt;

&lt;label class=&quot;radio ct-red&quot;&gt;

    &lt;input type=&quot;radio&quot; name=&quot;optionsRadios5&quot; data-toggle=&quot;radio&quot; id=&quot;optionsRadios5&quot; value=&quot;option1&quot; checked&gt;

    &lt;i&gt;&lt;/i&gt;Red

&lt;/label&gt;
</pre>
            
            <p>
                <h4>Methods</h4>
                <ul class="list-unstyled">

                    <li>
                        <b>.radio('check') </b>
                        sets the checkbox state to checked.
                    </li>
                    <li>
                        <b>.radio('uncheck') </b>
                        sets the state to unchecked.
                    </li>
                </ul>
                
<pre class="prettyprint">
$(':radio').radio('check');
</pre>
                <h4>Events</h4>
                <ul class="list-unstyled">
                    <li>
                        <b>.on('toggle') </b>
                        gets activated when the checkbox state changes between checked and unchecked.                        
                    </li>
                    <li>
                        <b>.on('change') </b>
                        the behaviour as the toggle, with the difference that the event is fired for each radio button that gets a state change. 
                    </li>
                </ul>
            </p>
<pre class="prettyprint">
$(':radio').on('toggle', function() {
  // Do something
});
</pre>
        
    </div>
    
</div>

<!-- end row -->


<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3> Switches</h3>
    </div>
    <div class="col-md-7">
        <p>
        If you want to use something more special than a checkbox, we recomment the switch. You can use it with both text and with icons. For extra customisation we added color classes.
        <br />
        For the original documentation, please go here: <a href="www.larentis.eu/switch">Larentis Switch</a>.
        </p>

        <input type="checkbox" checked data-toggle="switch" class="ct-green"/>
        <input type="checkbox" data-toggle="switch" />        

         <div class="switch"
          data-on-label="<i class='fa fa-check'></i>"
          data-off-label="<i class='fa fa-times'></i>">
          <input type="checkbox" checked/>
        </div>
        <div class="switch"
          data-on-label="<i class='fa fa-check'></i>"
          data-off-label="<i class='fa fa-times'></i>">
          <input type="checkbox"/>
        </div>
        
        <input type="checkbox" checked data-toggle="switch" class="ct-blue"/>
        <input type="checkbox" checked data-toggle="switch" class="ct-orange"/>
        <input type="checkbox" checked data-toggle="switch" class="ct-red"/>

        
<pre class="prettyprint">
&lt;input type=&quot;checkbox&quot; checked data-toggle=&quot;switch&quot; class=&quot;ct-green&quot;/&gt;

&lt;input type=&quot;checkbox&quot; data-toggle=&quot;switch&quot; /&gt;        


&lt;div class=&quot;switch&quot;

  data-on-label=&quot;&lt;i class=&apos;fa fa-check&apos;&gt;&lt;/i&gt;&quot;

  data-off-label=&quot;&lt;i class=&apos;fa fa-times&apos;&gt;&lt;/i&gt;&quot;&gt;

  &lt;input type=&quot;checkbox&quot; checked/&gt;

&lt;/div&gt;

&lt;div class=&quot;switch&quot;

  data-on-label=&quot;&lt;i class=&apos;fa fa-check&apos;&gt;&lt;/i&gt;&quot;

  data-off-label=&quot;&lt;i class=&apos;fa fa-times&apos;&gt;&lt;/i&gt;&quot;&gt;

  &lt;input type=&quot;checkbox&quot;/&gt;

&lt;/div&gt;
</pre>        
        
    </div>
</div>
<!-- end row -->


<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3> Dropdown </h3>
    </div>
    <div class="col-md-7">
        <p>
        We are very proud to present the dropdown, we added a subtle animation for this classic widget.
        </p>

        <div class="dropdown">
          <button class="btn dropdown-toggle btn-primary" type="button" id="dropdownMenu1" data-toggle="dropdown">
            Dropdown
            <b class="caret"></b>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#gsdk">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#gsdk">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#gsdk">Something else here</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#gsdk">Separated link</a></li>
          </ul>
        </div>
<pre class="prettyprint">
&lt;div class=&quot;dropdown&quot;&gt;

  &lt;button class=&quot;btn dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenu1&quot; data-toggle=&quot;dropdown&quot;&gt;

    Dropdown

    &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;

  &lt;/button&gt;

  &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;dropdownMenu1&quot;&gt;

    &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;

    &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;

    &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;

    &lt;li role=&quot;presentation&quot; class=&quot;divider&quot;&gt;&lt;/li&gt;

    &lt;li role=&quot;presentation&quot;&gt;&lt;a role=&quot;menuitem&quot; tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;

  &lt;/ul&gt;

&lt;/div&gt;
</pre>
                            
    </div>
</div>
<!-- end row -->

<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3>Inputs </h3>
    </div>
    <div class="col-md-7">
        <p>
        We restyled the Bootstrap input to give it a more flat, minimal look. You can use the classic look, different colors and states or input groups.
        </p>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                	<input type="text" value="" placeholder="Input" class="form-control" />
            	</div>   
        	</div>
        	<div class="col-md-6">
        	    <div class="form-group has-success">
                    <input type="text" value="Success" class="form-control" />
                </div> 
        	</div>
    	</div>
        <div class="row">
            <div class="col-md-6">
                  <div class="form-group has-error has-feedback">
                    <input type="text" value="Error" class="form-control" />
                    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                  </div>  
        	</div>
        	<div class="col-md-6">
                	<div class="input-group">
                      <input type="text" value="Group Addon" class="form-control">
                      <span class="input-group-addon"><i class="fa fa-group"></i></span>
                    </div> 
        	</div>
    	</div>
        
<pre class="prettyprint">
&lt;div class=&quot;form-group&quot;&gt;

    &lt;input type=&quot;text&quot; value=&quot;&quot; placeholder=&quot;Input&quot; class=&quot;form-control&quot; /&gt;

&lt;/div&gt;  



&lt;div class=&quot;form-group has-success&quot;&gt;
    
    &lt;input type=&quot;text&quot; value=&quot;Success&quot; class=&quot;form-control&quot; /&gt;

&lt;/div&gt;             	



&lt;div class=&quot;form-group has-error has-feedback&quot;&gt;

    &lt;input type=&quot;text&quot; value=&quot;Error&quot; class=&quot;form-control&quot; /&gt;

    &lt;span class=&quot;glyphicon glyphicon-remove form-control-feedback&quot;&gt;&lt;/span&gt;

&lt;/div&gt;



&lt;div class=&quot;input-group&quot;&gt;

    &lt;input type=&quot;text&quot; value=&quot;Group Addon&quot; class=&quot;form-control&quot;&gt;

    &lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;fa fa-group&quot;&gt;&lt;/i&gt;&lt;/span&gt;

&lt;/div&gt;
</pre>       
    </div>
</div>
<!-- end row --> 
   
<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3>Navbar </h3>
    </div>
    <div class="col-md-7">
        <p>
            We restyled the classic Bootstrap navbar:
        </p>
        

        <div id="navbar">
            <nav class="navbar navbar-default" role="navigation">
              <div class="container-fluid">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#gsdk">Brand</a>
                </div>
            
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav">
                    <li><a href="#gsdk">Work in progress...</a></li>
                    <li class="active"><a href="#gsdk">Link</a></li>
                    <li><a href="#gsdk">Link</a></li>
                    <li class="dropdown">
                      <a href="#gsdk" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="#gsdk">Action</a></li>
                        <li><a href="#gsdk">Another action</a></li>
                        <li><a href="#gsdk">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#gsdk">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#gsdk">One more separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                </div><!-- /.navbar-collapse -->
              </div><!-- /.container-fluid -->
            </nav>
        </div><!--  end navbar -->

        
<pre class="prettyprint">
&lt;div id=&quot;navbar&quot;&gt;

    &lt;nav class=&quot;navbar navbar-default&quot; role=&quot;navigation&quot;&gt;

      &lt;div class=&quot;container-fluid&quot;&gt;

        &lt;div class=&quot;navbar-header&quot;&gt;

          &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#bs-example-navbar-collapse-1&quot;&gt;

            &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;

            &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;

            &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;

            &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;

          &lt;/button&gt;

          &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Brand&lt;/a&gt;

        &lt;/div&gt;


        &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;bs-example-navbar-collapse-1&quot;&gt;

          &lt;ul class=&quot;nav navbar-nav&quot;&gt;

            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Work in progress...&lt;/a&gt;&lt;/li&gt;

            &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;

            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;

            &lt;li class=&quot;dropdown&quot;&gt;

              &lt;a href=&quot;#&quot; class=&quot;dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;Dropdown &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/a&gt;

              &lt;ul class=&quot;dropdown-menu&quot;&gt;

                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something else here&lt;/a&gt;&lt;/li&gt;

                &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Separated link&lt;/a&gt;&lt;/li&gt;

                &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;

                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;One more separated link&lt;/a&gt;&lt;/li&gt;

              &lt;/ul&gt;

            &lt;/li&gt;

          &lt;/ul&gt;

        &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;

      &lt;/div&gt;&lt;!-- /.container-fluid --&gt;

    &lt;/nav&gt;

&lt;/div&gt;&lt;!--  end navbar --&gt; 
</pre>
        <p class="space-top">
            Besides the default navbar, we added 5 new colors: blue, azzure, green, orange, red. If you want to use one of them, you have to replace the 'navbar-default' with the class for the chosen color 'navbr-ct-#color'.
        </p>        
        
<!-- navbar blue -->

<div id="navbar-blue">
    <nav class="navbar navbar-ct-blue" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#gsdk">Brand</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#gsdk">Work in progress...</a></li>
            <li class="active"><a href="#gsdk">Link</a></li>
            <li><a href="#gsdk">Link</a></li>
            <li class="dropdown">
              <a href="#gsdk" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#gsdk">Action</a></li>
                <li><a href="#gsdk">Another action</a></li>
                <li><a href="#gsdk">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#gsdk">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#gsdk">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

</div><!--  end navbar -->

<!-- navbar azzure -->
<div id="navbar-azzure">
        <nav class="navbar navbar-ct-azzure" role="navigation">
          <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#gsdk">Brand</a>
            </div>
        
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li><a href="#gsdk">Work in progress...</a></li>
                <li class="active"><a href="#gsdk">Link</a></li>
                <li><a href="#gsdk">Link</a></li>
                <li class="dropdown">
                  <a href="#gsdk" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#gsdk">Action</a></li>
                    <li><a href="#gsdk">Another action</a></li>
                    <li><a href="#gsdk">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#gsdk">Separated link</a></li>
                    <li class="divider"></li>
                    <li><a href="#gsdk">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
          </div><!-- /.container-fluid -->
        </nav>
    
    </div><!--  end navbar -->

<!-- navbar green -->
<div id="navbar-green">
    <nav class="navbar navbar-ct-green" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#gsdk">Brand</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#gsdk">Work in progress...</a></li>
            <li class="active"><a href="#gsdk">Link</a></li>
            <li><a href="#gsdk">Link</a></li>
            <li class="dropdown">
              <a href="#gsdk" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#gsdk">Action</a></li>
                <li><a href="#gsdk">Another action</a></li>
                <li><a href="#gsdk">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#gsdk">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#gsdk">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

</div><!--  end navbar -->

<!-- navbar orange -->
<div id="navbar-orange">
    <nav class="navbar navbar-ct-orange" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#gsdk">Brand</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#gsdk">Work in progress...</a></li>
            <li class="active"><a href="#gsdk">Link</a></li>
            <li><a href="#gsdk">Link</a></li>
            <li class="dropdown">
              <a href="#gsdk" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#gsdk">Action</a></li>
                <li><a href="#gsdk">Another action</a></li>
                <li><a href="#gsdk">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#gsdk">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#gsdk">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

</div><!--  end navbar -->

<!-- navbar red -->

<div id="navbar-red">
    <nav class="navbar navbar-ct-red" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#gsdk">Brand</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="#gsdk">Work in progress...</a></li>
            <li class="active"><a href="#gsdk">Link</a></li>
            <li><a href="#gsdk">Link</a></li>
            <li class="dropdown">
              <a href="#gsdk" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#gsdk">Action</a></li>
                <li><a href="#gsdk">Another action</a></li>
                <li><a href="#gsdk">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#gsdk">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#gsdk">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

</div><!--  end navbar -->


        <p class="space-top">
            Besides all this customisation, we have an extra navbar. 'Navbar-transparent' is a special class that you can to use if you want the navbar to be transparent and then turn to color after scrolling for a certain number of pixels. We recommend that the part of your page that has the transparent navbar contains something non-cluttered, like an image. If you want to see a nice example in details, check <a href="navbar-transparent.html">this page</a> out.   
        </p>
    </div>
</div>

<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3> Nav Pills</h3>
    </div>
    <div class="col-md-7">
        <p>
            We changed the design for the Bootstrap nav pills into something a bit more fresh. We also added more color classes for customisation. 
        </p>
        
        <ul class="nav nav-pills ct-blue">
              <li class="active"><a href="#gsdk">Home</a></li>
              <li><a href="#gsdk"> Profile</a></li>
              <li><a href="#gsdk">Messages</a></li>
        </ul>
        <br />
        <ul class="nav nav-pills ct-azzure">
              <li class="active"><a href="#gsdk">Home</a></li>
              <li><a href="#gsdk"> Profile</a></li>
              <li><a href="#gsdk">Messages</a></li>
        </ul>
        <br />
        <ul class="nav nav-pills ct-green">
              <li class="active"><a href="#gsdk">Home</a></li>
              <li><a href="#gsdk"> Profile</a></li>
              <li><a href="#gsdk">Messages</a></li>
        </ul>
        <br />
        <ul class="nav nav-pills ct-orange">
              <li class="active"><a href="#gsdk">Home</a></li>
              <li><a href="#gsdk"> Profile</a></li>
              <li><a href="#gsdk">Messages</a></li>
        </ul>
        <br />
        <ul class="nav nav-pills ct-red">
              <li class="active"><a href="#gsdk">Home</a></li>
              <li><a href="#gsdk"> Profile</a></li>
              <li><a href="#gsdk">Messages</a></li>
        </ul>
<pre class="prettyprint">
&lt;ul class=&quot;nav nav-pills ct-blue&quot;&gt;

    &lt;!--  color-classes: &quot;ct-blue&quot;, &quot;ct-azure&quot;, &quot;ct-orange&quot;, &quot;ct-red&quot;, &quot;ct-green&quot;

          special-classes: &quot;no-border&quot;  --&gt;

      &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;

      &lt;li&gt;&lt;a href=&quot;#&quot;&gt; Profile&lt;/a&gt;&lt;/li&gt;

      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Messages&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;
</pre>
    </div>
</div>
<!-- end row -->


<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3> Pagination</h3>
    </div>
    <div class="col-md-7">
    <p>
        We took the Bootstrap pagination elements and customised them to fit the overall theme. We also added a special class called 'no-border', which dies what its name says and improves the overall clean look.
    </p>
    <ul class="pagination ct-blue no-border"> 
     <!--   color-classes: "ct-blue", "ct-azure", "ct-orange", "ct-red", "ct-green"
            special-classes: "no-border"        
     -->
      <li><a href="#gsdk">&laquo;</a></li>
      <li class="active"><a href="#gsdk">1</a></li>
      <li><a href="#gsdk">2</a></li>
      <li><a href="#gsdk">3</a></li>
      <li><a href="#gsdk">4</a></li>
      <li><a href="#gsdk">5</a></li>
      <li><a href="#gsdk">&raquo;</a></li>
    </ul> 
    <ul class="pagination ct-blue"> 
      <li><a href="#gsdk">&laquo;</a></li>
      <li><a href="#gsdk">1</a></li>
      <li class="active"><a href="#gsdk">2</a></li>
      <li><a href="#gsdk">3</a></li>
      <li><a href="#gsdk">4</a></li>
      <li><a href="#gsdk">5</a></li>
      <li><a href="#gsdk">&raquo;</a></li>
    </ul> 
    
    <p class="space-top">
        Besides the classic look, we also added the color classes to offer more customisation.
    </p>
    
    <ul class="pagination ct-azzure"> 
      <li><a href="#gsdk">&laquo;</a></li>
      <li><a href="#gsdk">1</a></li>
      <li><a href="#gsdk">2</a></li>
      <li class="active"><a href="#gsdk">3</a></li>
      <li><a href="#gsdk">4</a></li>
      <li><a href="#gsdk">5</a></li>
      <li><a href="#gsdk">&raquo;</a></li>
    </ul> 
    <ul class="pagination ct-green"> 
      <li><a href="#gsdk">&laquo;</a></li>
      <li><a href="#gsdk">1</a></li>
      <li><a href="#gsdk">2</a></li>
      <li><a href="#gsdk">3</a></li>
      <li class="active"><a href="#gsdk">4</a></li>
      <li><a href="#gsdk">5</a></li>
      <li><a href="#gsdk">&raquo;</a></li>
    </ul>     
    <ul class="pagination ct-orange"> 
      <li><a href="#gsdk">&laquo;</a></li>
      <li><a href="#gsdk">1</a></li>
      <li><a href="#gsdk">2</a></li>
      <li><a href="#gsdk">3</a></li>
      <li><a href="#gsdk">4</a></li>
      <li class="active"><a href="#gsdk">5</a></li>
      <li><a href="#gsdk">&raquo;</a></li>
    </ul> 
    <ul class="pagination ct-red"> 
      <li><a href="#gsdk">&laquo;</a></li>
      <li><a href="#gsdk">1</a></li>
      <li><a href="#gsdk">2</a></li>
      <li><a href="#gsdk">3</a></li>
      <li><a href="#gsdk">4</a></li>
      <li class="active"><a href="#gsdk">5</a></li>
      <li><a href="#gsdk">&raquo;</a></li>
    </ul>     
<pre class="prettyprint">
&lt;ul class=&quot;pagination ct-blue&quot;&gt; 

  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;

  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;

  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;

  &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;3&lt;/a&gt;&lt;/li&gt;

  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;4&lt;/a&gt;&lt;/li&gt;

  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;5&lt;/a&gt;&lt;/li&gt;

  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt
</pre>
  
    </div>
</div>
<!-- end row -->


<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3> Progress Bars</h3>
    </div>
    <div class="col-md-7">
    
        <p>The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean and minimal.</p>
         <div class="progress">
          <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
            <span class="sr-only">60% Complete</span>
          </div>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
          </div>
        </div>
        <div class="progress">
          <div class="progress-bar progress-bar-success" style="width: 35%">
            <span class="sr-only">35% Complete (success)</span>
          </div>
          <div class="progress-bar progress-bar-warning" style="width: 20%">
            <span class="sr-only">20% Complete (warning)</span>
          </div>
          <div class="progress-bar progress-bar-danger" style="width: 10%">
            <span class="sr-only">10% Complete (danger)</span>
          </div>
        </div>       
        
        
<pre class="prettyprint">
&lt;div class=&quot;progress&quot;&gt;

  &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 30%;&quot;&gt;

    &lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;

  &lt;/div&gt;

&lt;/div&gt;

&lt;div class=&quot;progress&quot;&gt;

  &lt;div class=&quot;progress-bar progress-bar-info&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 60%;&quot;&gt;

    &lt;span class=&quot;sr-only&quot;&gt;60% Complete&lt;/span&gt;

  &lt;/div&gt;

&lt;/div&gt;

&lt;div class=&quot;progress&quot;&gt;

  &lt;div class=&quot;progress-bar progress-bar-success&quot; style=&quot;width: 35%&quot;&gt;

    &lt;span class=&quot;sr-only&quot;&gt;35% Complete (success)&lt;/span&gt;

  &lt;/div&gt;

  &lt;div class=&quot;progress-bar progress-bar-warning&quot; style=&quot;width: 20%&quot;&gt;

    &lt;span class=&quot;sr-only&quot;&gt;20% Complete (warning)&lt;/span&gt;

  &lt;/div&gt;

  &lt;div class=&quot;progress-bar progress-bar-danger&quot; style=&quot;width: 10%&quot;&gt;

    &lt;span class=&quot;sr-only&quot;&gt;10% Complete (danger)&lt;/span&gt;

  &lt;/div&gt;

&lt;/div&gt;
</pre>
    </div>
</div>
<!-- end row -->

<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3> Sliders</h3>
    </div>
    <div class="col-md-7">
        <p>We restyled jQuery UI slider, while keeping the design consistent.</p>
        
        <div id="slider-default" class="slider-info"></div>
        <br>
        <div id="slider-range" class="slider-success"></div>
        
        <p class="space-top">Markup:</p>
<pre class="prettyprint">
&lt;div id=&quot;slider-default&quot; class=&quot;slider-info&quot;&gt;&lt;/div&gt;

&lt;div id=&quot;slider-range&quot; class=&quot;slider-success&quot;&gt;&lt;/div&gt;
</pre>

        <p class="space-top">Js:</p>
<pre class="prettyprint">
$( &quot;#slider-range&quot; ).slider({

	range: true,
	min: 0,
	max: 500,
	values: [ 75, 300 ],

});

$( &quot;#slider-default&quot; ).slider({
		
		value: 70,
		orientation: &quot;horizontal&quot;,
		range: &quot;min&quot;,
		animate: true

});
</pre>
    </div>
</div>

<!-- end row -->



<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3> Tooltips</h3>
    </div>
    <div class="col-md-7">
        <p style="margin-bottom: 45px;">
        We restyled the Bootstrap tooltip.
        </p>
        <button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top" data-trigger="manual">Button with Tooltip</button>
        
        <p class="space-top">Markup:</p>   
<pre class="prettyprint">
&lt;button type=&quot;button&quot; class=&quot;btn btn-default btn-tooltip&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;Tooltip on top&quot; data-trigger=&quot;manual&quot;&gt;Button with Tooltip&lt;/button&gt;
</pre>

        <p class="space-top">Js:</p>
<pre class="prettyprint">
$(&apos;.btn-tooltip&apos;).tooltip();
</pre>
    </div>
</div>
<!-- end row -->

<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3> Collapsable groups </h3>
    </div>
    <div class="col-md-7">
            <p>
            The Get Shit Done Kit has new classes for collapsable groups which offer a nice sneak peak into the content of the body of the group. 
            <br />
            If you want to stick with the old classes, they remain compatible. If you want to see the new ones, you will have to add data-toggle="gsdk-collapse" instead of collapse.
            </p>
            <p>
            Here is an example of both the groups. The first two are done using the preview on hover and the third one is classical.
            </p>
            
            <div id="acordeon">
                <div class="panel-group" id="accordion">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-target="#collapseOne" href="#collapseOne" data-toggle="gsdk-collapse">
                          Collapsible Group Item #1
                        </a>
                      </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                      <div class="panel-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-target="#collapseTwo" href="#collapseTwo" data-toggle="gsdk-collapse">
                          Collapsible Group Item #2
                        </a>
                      </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                      <div class="panel-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h4 class="panel-title">
                        <a data-toggle="collapse" href="#collapseThree">
                          Collapsible Group Item #3
                        </a>
                      </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                      <div class="panel-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                      </div>
                    </div>
                  </div>
                </div>
                
            </div><!--  end acordeon -->
            
<pre class="prettyprint">
&lt;div id=&quot;acordeon&quot;&gt;

    &lt;div class=&quot;panel-group&quot; id=&quot;accordion&quot;&gt;

      &lt;div class=&quot;panel panel-default&quot;&gt;

        &lt;div class=&quot;panel-heading&quot;&gt;

          &lt;h4 class=&quot;panel-title&quot;&gt;

            &lt;a data-target=&quot;#collapseOne&quot; href=&quot;#collapseOne&quot; data-toggle=&quot;gsdk-collapse&quot;&gt;

              Collapsible Group Item #1

            &lt;/a&gt;

          &lt;/h4&gt;

        &lt;/div&gt;

        &lt;div id=&quot;collapseOne&quot; class=&quot;panel-collapse collapse&quot;&gt;

          &lt;div class=&quot;panel-body&quot;&gt;

            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.

          &lt;/div&gt;

        &lt;/div&gt;

      &lt;/div&gt;

      &lt;div class=&quot;panel panel-default&quot;&gt;

        &lt;div class=&quot;panel-heading&quot;&gt;

          &lt;h4 class=&quot;panel-title&quot;&gt;

            &lt;a data-target=&quot;#collapseTwo&quot; href=&quot;#collapseTwo&quot; data-toggle=&quot;gsdk-collapse&quot;&gt;

              Collapsible Group Item #2

            &lt;/a&gt;

          &lt;/h4&gt;

        &lt;/div&gt;

        &lt;div id=&quot;collapseTwo&quot; class=&quot;panel-collapse collapse&quot;&gt;

          &lt;div class=&quot;panel-body&quot;&gt;

            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.

          &lt;/div&gt;

        &lt;/div&gt;

      &lt;/div&gt;

      &lt;div class=&quot;panel panel-default&quot;&gt;

        &lt;div class=&quot;panel-heading&quot;&gt;

          &lt;h4 class=&quot;panel-title&quot;&gt;

            &lt;a data-toggle=&quot;collapse&quot; href=&quot;#collapseThree&quot;&gt;

              Collapsible Group Item #3

            &lt;/a&gt;

          &lt;/h4&gt;

        &lt;/div&gt;

        &lt;div id=&quot;collapseThree&quot; class=&quot;panel-collapse collapse&quot;&gt;

          &lt;div class=&quot;panel-body&quot;&gt;

            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven&apos;t heard of them accusamus labore sustainable VHS.

          &lt;/div&gt;

        &lt;/div&gt;

      &lt;/div&gt;

    &lt;/div&gt;

    

&lt;/div&gt;&lt;!--  end acordeon --&gt;
</pre>
        
    </div>
</div>
<!-- end row -->

<div class="row tim-row">
    <div class="col-md-3 col-md-offset-1">
        <h3> Notifications </h3>
    </div>
    <div class="col-md-7">
        The new Get Shit Done notification are looking more fresh and clean. They go great with the navbar. If you want to see how we recommen using them, see this:
        <br /><br /> <a href="notification.html" class="btn btn-info btn-fill btn-sm">Live Preview</a>
    </div>
</div>
<!-- end row -->

</div>
<!-- end container -->
</div>
<div class="footer">
    <div class="overlayer">
    <div class="container">
        <div class="row">
            <div class="credits">
                &copy; 2016 Get Shit Done Kit, made with <i class="fa fa-heart heart" alt="love"></i> for a better web.
            </div>
        </div>
    </div>
    </div>
</div>
</body>

<script>
$( "#slider-range" ).slider({
	range: true,
	min: 0,
	max: 500,
	values: [ 75, 300 ],
});
$( "#slider-default" ).slider({
		value: 70,
		orientation: "horizontal",
		range: "min",
		animate: true
});
$('.btn-tooltip').tooltip('show');
$('.radio').on('toggle', function() {
  console.log('ok');
});
/*
$(document).ready(function(){
    $('.btn-tooltip').tooltip('show');
});
*/
</script>
</html>